<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="content/js/jquery.comment.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <style>

        .commentbox {
            width: 90%;
            margin: 20% auto;
        }

        .mytextarea {
            width: 80%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
        }

        .comment-list {
            width: 80%;
            margin: 20px auto;
            clear: both;
            padding-top: 20px;
        }

        .comment-list .comment-info {
            position: relative;
            margin-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }

        .comment-list .comment-info header {
            width: 10%;
            position: absolute;
        }

        .comment-list .comment-info header img {
            width: 100%;
            border-radius: 50%;
            padding: 5px;
        }

        .comment-list .comment-info .comment-right {
            padding: 5px 0px 5px 11%;
        }

        .comment-list .comment-info .comment-right h3 {
            margin: 5px 0px;
        }

        .comment-list .comment-info .comment-right .comment-content-header {
            height: 25px;
        }

        .comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span {
            padding-right: 2em;
            color: #aaa;
        }

        .comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span.reply-btn, .send, .reply-list-btn {
            cursor: pointer;
        }

        .comment-list .comment-info .comment-right .reply-list {
            border-left: 3px solid #ccc;
            padding-left: 7px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply {
            border-bottom: 1px dashed #ccc;
        }

        .comment-list .comment-info .comment-right .reply-list .reply div span {
            padding-left: 10px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply p span {
            padding-right: 2em;
            color: #aaa;
        }
    </style>
    <script>
        $(function () {
            var id = getParams().id;
            $.get("/newsContent/" + id, {state: 1}, function (data) {
                $(".newsDetail").renderValues(data);
            })

            $.get("/newsPage/" + id, function (data) {
                console.log(data);
                $("#newsCommends").renderValues({list: data}, {
                    handle: function (ele, value) {
                        $(ele).attr("href", "/newsContent.html?id=" + value);
                    }
                });
                //显示第一个推荐
                $("#newsCommends .carousel-inner > div:first").addClass("active");
            });

            var user = JSON.parse(sessionStorage.getItem("user"));

            $.get("/newsComment/"+id,function (data) {
                if (data){
                    $(".usercomment").css("display","");
                    $(".usercomment").renderValues({list:data});
                }
            })
            if(user==null){
                $("#comment").click(function () {
                    $(document).dialog({
                        type: "notice",
                        infoText: "亲,登录了才可以评论哦",
                        autoClose: 1500,
                        position: "center"
                    });
                })
            }else{
                $("#comment").on('click', function () {
                    var content = $("#content").val();
                    $.post("/newsComment", {userId: user.id, content: content, newsId: id}, function (data) {



                        $.get("/newsComment/"+id,function (data) {
                            if (data){
                                $(".usercomment").css("display","");
                                $(".usercomment").renderValues({list:data});
                            }
                        })
                    })



                });

            }





        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>
<div>
    <div class="newsDetail">

        <div class="container">
            <img render-src="coverUrl" width="100%" height="200px">
            <div class="row typeRow">
                <div class="col-4">
                    <span class="type">美图美文</span>
                </div>
                <div class="col-2">
                </div>
                <div class="col-2">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type">骡窝官方</span>
                </div>
            </div>
            <div class="detail" render-html="newsContent.content" width="100%" height="200px">
            </div>
        </div>
    </div>
    <hr>
    <h3 class="module-title">相关推荐</h3>
    <div id="recommend" class="carousel slide" data-ride="carousel">
        <div id="newsCommends">
            <div class="carousel-inner" render-loop="list">
                <!-- 轮播图的内部 -->
                <div class="carousel-item">
                    <a render-fun="handle" render-key="list.id">
                        <img class="d-block w-100" render-src="list.coverUrl" width="100%" height="200px">
                        <span class="recommend" render-html="list.title"></span>
                    </a>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#recommend" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only"></span>
        </a>
        <a class="carousel-control-next" href="#recommend" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only"></span>
        </a>
    </div>
    <hr>


    <div class="container">
        <div class="commentbox">
            <textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
            <div class="btn btn-info pull-right" id="comment">评论</div>
        </div>

    </div>
</div>
<!--评论 -->
<h3 class="module-title">相关评论</h3>
    <hr>
<div class="col-md-12 col-sm-12 col-xl-12 one cont usercomment" style="margin: 0%;display: none">
    <div render-loop="list">
        <div render-value="list.id">
            <div class="col-md-2 col-sm-2 col-xl-12 one img">
                <img style="width: 40px" render-src="list.user.headImgUrl">
            </div>
            <div class="col-md-10 col-sm-10 col-xl-12 one content">
                <div class="comment-right">
                    <h4 render-html="list.user.nickName"></h4>
                    <p class="tent" render-html="list.content"></p>
                    <div class="comment-content-footer">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xl-12 three">
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="comment-content-header three commend-left">
                        <span><i class="glyphicon glyphicon-time two" render-html="list.createTime"></i></span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span><i class="glyphicon glyphicon-map-marker two" render-html="list.user.place"></i></span>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>


</body>

</html>